<template>
  <div class="appeal-list">
    <el-tabs @tab-click="tabClick" v-model="active">
      <el-tab-pane v-for="(tab, index) in tabList" :label="tab.name" :name="tab.type" :key="index"></el-tab-pane>
    </el-tabs>
    <table-form v-bind="params" ref="tableForm" >
      <template #imgs="scope">
        <div style="padding: 6px 0;">
          <el-image :src="img" v-for="img in scope.row.imageUrlList" :key="img" fit='contain' style="margin-right: 6px;width: 50px; height: 50px"
          :preview-src-list="[img]">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </div>
      </template>
    </table-form>
    <el-dialog title="审批" :visible.sync="visible" :close-on-click-modal="false" >
      <div style="font-size: 16px;">历史办理：</div>
      <p style="line-height: 36px;" v-for="(process, index) in processList" :key="index">
        <span>办理意见:</span>{{ process.title }}
        <span style="margin-left: 12px;">{{ process.handleTime }}</span>
      </p>
      <formBox ref="formbox" :formData.sync="formData" :ItemList="itemList"></formBox>
      <div class="footer" slot="footer">
        <el-button  size="small" @click="visible = false">取消</el-button>
        <el-button type="primary" size="small" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tableForm from '@/components/TableForm'
import formBox from '@/components/Formbox'
export default {
  name: 'appeal-list',
  components: {
    tableForm,
    formBox,
  },
  props: {
    mode: {
      type: String,
      default: 'page'
    }
  },
  data () {
    return {
      active: 0,
      tabList: [
        {
          name: '未受理',
          type: '0',
          show: true,
        },
        {
          name: '受理中',
          type: '1',
          show: true,
        },
        {
          name: '已办结',
          type: '2',
          show: true,
        }
      ],
      params: {
        searchList: [
          {
            type: 'Input',
            label: '诉求人',
            prop: 'name'
          },
          {
            type: 'Input',
            label: '诉求号',
            prop: 'requestCode'
          },
          {
            type: 'Select',
            label: '类型',
            prop: 'litigationType',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '法律咨询类',
                    value: '0'
                },
                {
                    label: '事项办理类',
                    value: '1'
                }
            ],
          },
          // {
          //   type: 'Select',
          //   label: '审批状态',
          //   prop: 'status',
          //   options: [
          //       {
          //           label: '全部',
          //           value: ''
          //       },
          //       {
          //           label: '未受理',
          //           value: 0
          //       },
          //       {
          //           label: '受理中',
          //           value: 1
          //       },
          //       {
          //           label: '已办结',
          //           value: 2
          //       }
          //   ],
          // }
        ],
        loadDataUrl: {
          api: 'Lushu',
          url: 'getApplealList'
        },
        options: [
          {
            name: '导出',
            type: 'export',
            showCondition: this.mode === 'page',
            method: ({searchData}) => {
              this.Lushu.export({...searchData,status: this.active}, '诉求列表')
            },
          }
        ],
        SelectionSwitch: false,
        tableHeads: [
          {
            prop: 'name',
            label: '诉求人',
            width: '70px'
          },
           {
            prop: 'idCard',
            label: '诉求人证件号',
            width: '170px'
          },
          {
            prop: 'contactInfo',
            label: '诉求人电话',
            width: '120px'
          },
          {
            prop: 'title',
            label: '诉求主题',
            width: '120px'
          },
          {
            prop: 'requestCode',
            label: '诉求号',
            width: '90px'
          },
          {
            prop: 'litigationType',
            label: '诉求类型',
            formatter: (value) => ['法律咨询类', '事项办理类'][value],
            width: '80px'
          },
          {
            prop: 'type',
            label: '咨询类型',
            formatter: (value) => ['合规建设指导', '合同纠纷', '劳动争议', '其他', '政法系统领导面对面', '审判监督', '法制体检', '法律援助', '公证服务', '检察听证', '其他'][value - 1],
            width: '100px'
          },
          {
            prop: 'imageUrlList',
            label: '图片',
            slotName: 'imgs',
            width: '120px',
          },
          {
            prop: 'content',
            label: '诉求内容',
          },
          {
            prop: 'status',
            label: '状态',
            formatter: (status) => {
              const arr = ['未受理', '受理中', '已完结']
              return arr[status]
            },
            width: '70px'
          },
        ],
        tableMethed: this.mode === 'page' ? [
          {
            name: '导出',
            method: (row) => {
              this.Lushu.export({requestCode: row.requestCode}, `${row.name}的诉求`)
            }
          },
            {
            name: '受理',
            showCondition: (row) => row.status == 0,
            method: async (row) => {
              const params = {
                title: '已受理',
                politicsLawId: row.id
            }
            await this.Lushu.process(params)
            this.$message.success('受理成功')
            this.$refs.tableForm.ClearInfo()
            }
          },
          {
            name: '办理',
            showCondition: (row) => row.status == 1,
            method: async (row) => {
              this.processList = []
              this.visible = true
              this.currentAppeal = row
              this.processList = await this.Lushu.getProcess(row.id)
            }
          },
          {
            name: '办理结束',
            showCondition: (row) => row.status == 1,
            method: async (row) => {
              this.$confirm('是否确认办理结束?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.Lushu.complete({
                    politicsLawId: row.id
                }).then(() => {
                    this.$refs.tableForm.ClearInfo()
                })
            })
            }
          },
        ] : [],
        defaultSearchForm: {
          status: 0
        }
      },
      formData: {},
      visible: false,
      itemList: [
        {
          type: 'Textarea',
          label: '审批意见',
          prop: 'title'
        }
      ],
      processList: [],
      currentAppeal: {}
    }
  },
  methods: {
    tabClick() {
      console.log(this.active)
      this.params.defaultSearchForm.status = this.active
      this.$refs.tableForm.InquireInfo({
        status: this.active
      })
    },
    submit() {
        const params = {
            ...this.formData,
            politicsLawId: this.currentAppeal.id
        }
        this.Lushu.process(params)
        this.$message.success('办理成功')
        this.formData = {}
        this.visible = false
    }
  }
}
</script>
